<template>
  <div class="PicDetail" v-show="selfShow">
    <!--    图片内容-->
    <van-cell-group class="newsItem">
      <van-cell class="title" :title="picInfo.title" :value="'阅读量:'+picInfo.click"/>
      <div class="picList" v-show="picListShow">
        <img alt="" v-for="(item,index) in picList" :key="item.id"
             v-lazy="item.src"
             @click="showBigImg(index)">
      </div>
      <van-cell class="content" :value="picInfo.content"/>
    </van-cell-group>
    <!--    评论区域-->
    <remark :newsId="photoId"></remark>
  </div>
</template>

<script>
import Remark from 'components/Remark'
import { ImagePreview } from 'vant'

export default {
  name: 'PicDetail',
  props: {
    photoId: {
      type: String
    }
  },
  data: () => ({
    picInfo: {},
    picList: [],
    selfShow: true
  }),
  components: {
    Remark
  },
  created () {
    this.getNewsInfo()
    this.getPicList()
  },
  methods: {
    async getNewsInfo () {
      const { message } = await this.$http.getPicDetail(this.photoId)
      if (!message) {
        this.selfShow = false
        return
      }
      this.picInfo = message
    },
    async getPicList () {
      const { message } = await this.$http.getPicList(this.photoId)
      this.picList = message
    },
    showBigImg (id) {
      const images = []
      this.picList.forEach(el => {
        if (el.src) images.push(el.src)
      })
      ImagePreview({
        images,
        startPosition: id
      })
    }
  },
  computed: {
    picListShow () {
      return this.picList.length !== 0
    }
  }
}
</script>

<style lang="scss" scoped>
  .PicDetail {
    font-size: 20px;

    .newsItem {
      margin-top: 20px;
      padding: 20px 0;

      .picList {
        width: 100%;
        height: 144px;
        display: flex;
        justify-content: space-around;

        img {
          width: 144px;
          height: 100%;
        }
      }

      .title {
        font-size: 16px;

        .van-cell__title {
          font-size: 22px;
          font-weight: bold;
        }
      }

      .content {
        .van-cell__value {
          font-size: 18px;
          font-weight: normal;
          line-height: 37px;
          text-indent: 32px;
          color: #333333;
        }
      }

      .van-cell::after {
        border: none;
      }
    }
  }
</style>
